<template>
    <div class="preSaleContent">
        <div class="flex flexBetween navContent colorfff" v-if="isLogin">
            <div class="w50 center">{{storeList[0].name}}</div>
            <div class="w50 center flex flexCenter alignCenter" @click="goCheckDate">{{activeDate}} <span class="arrowSty"></span></div>
            
        </div>
        <!-- <div class=" colorfff navList" v-if="isLogin">
            <van-dropdown-menu active-color="#4873c1">
                <van-dropdown-item v-model="storeVal" :options="storeList" @change='getChangeDrop' />
                <van-dropdown-item  v-model="dateVal" @open='goOpen' :options="dateList" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div> -->
        <div class="flex alignCenter saleInfo" v-if="isLogin">
            <div class="mr10 color999">预售金额（元）</div>
            <input type="number" v-model="amount" placeholder="请输入预售金额" />
        </div>
        <div class="center" v-if="isLogin">
            <div class="saveBtn center colorBlue disInline" @click="getPresaleSave">提交</div>
            <div class="color666 fontSize12" @click="goLink" style="margin-top:0.6rem;text-decoration:underline">提交记录</div>
        </div>
        <div class="center mt40" v-if="!isLogin">请登录后再操作</div>
        <van-calendar :min-date="minDate" v-model="isShowDate" color="#4873c1" @confirm="onConfirmDate"  />
    </div>
</template>
<script>
import {GetQueryStr,isMoney} from '@/common/common.js'
import { Toast,Dialog } from 'vant'
export default {
  name: "salesReport",
  data() {
    return {
        storeVal:'',
        storeList:[],
        dateVal:'',
        dateList:[],
        activeDate:'',
        amount:'',
        isShowDate:false,
        minDate: '',
        // maxDate: '',
        isLogin:false
    }
  },
  created(){
    var date=new Date()
    let year=date.getFullYear()
    let month=date.getMonth() + 1
    let day= date.getDate()
    let nowDate=`${year}-${month}-${day}`
    this.activeDate=nowDate
    // this.nowDate=`${year}-${month}-${day}`
    // console.log('年月日',year,month,day)
    this.minDate=new Date(2021, month, day)
    let obj={
        text: nowDate, value: day
    }
    this.dateVal=day
    this.dateList=[obj]
    let token=GetQueryStr('token')
    // console.log('token',token)
    if(token&&token!==''){
        localStorage.setItem('token',token)
        this.getPresaleUser()
    }
  },
  methods:{
    getPresaleUser(){
        Toast.loading({
            message: '加载中',
            forbidClick: true,
            duration:0
        })
        this.$apiRequest.getPresaleUser({}).then(res=>{
            console.log('获取预售信息',res)
            if(res.code==1){
                this.isLogin=true
                let list=res.data.storeList
                list.map(i=>{
                    i.value=i.code,
                    i.text=i.name
                })
                this.storeList=list
                this.storeVal=this.storeList[0].value
                this.getPresaleInfo()
            }else{
                // Toast(res.msg)
                this.isLogin=false
            }
            Toast.clear()
        })
    },
    getPresaleInfo(){//获取金额
        let obj={
            code:this.storeVal,
            date:this.activeDate
        }
        this.$apiRequest.getPresaleInfo(obj).then(res=>{
            // console.log('获取录入金额',res)
            if(res.code==1){
                res.data?this.amount=res.data.amount:this.amount=''
            }
        })
    },
    getChangeDrop(e){
        this.storeVal=e
        this.getPresaleInfo()
    },
    goOpen(){
        this.isShowDate=true
    },
    goCheckDate(){
        this.isShowDate=true
    },
    onConfirmDate(date){
        // console
        this.isShowDate=false
        let activeDate=`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        this.dateList=[{text:activeDate,value:date.getDate()}]
        this.dateVal=date.getDate()
        // console.log('activeDate',activeDate)
        this.activeDate=activeDate
        this.getPresaleInfo()
        // this.nowDate=activeDate
        // this.getDayReportByRegion()
    },
    getPresaleSave(){
        let that=this
        if(this.amount===''){
            Toast('请填写金额')
            return
        }
        let dd=isMoney(+this.amount)
        if(!isMoney(+this.amount)){
            Toast('填写的金额格式不正确')
            return
        }

        Dialog.confirm({
            title: '提示',
            message: '确定提交吗?',
            confirmButtonColor:'#4873c1',
            cancelButtonColor:'#999'
        })
        .then(() => {
            that.onSave()
        })
        .catch(() => {});
    },
    onSave(){
        let that=this
        let obj={
            code:this.storeVal,
            date:this.activeDate,
            amount:+this.amount
        }
        Toast.loading({
            message: '提交中',
            forbidClick: true,
            duration:0
        })
        this.$apiRequest.getPresaleSave(obj).then(res=>{
            // console.log('录入状态',res)
            if(res.code==1){
                Toast.success('录入成功')
                this.getPresaleInfo()
                setTimeout(function(){
                    that.$router.push({name:'preSaleList',query:{storeVal:that.storeVal}})
                },2000)
            }else{
                Toast('录入失败')
            }
            Toast.clear()
        })
    },
    goLink(){
        this.$router.push({name:'preSaleList',query:{storeVal:this.storeVal,storeName:this.storeList[0].name}})
    }
  }
}

</script>
<style >
/* .preSaleContent .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
.van-dropdown-menu__bar{
    background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
} */
.navList .van-dropdown-menu__bar{
     background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228)) !important;
}
</style>
<style lang='less' scoped>
.mt40{margin-top: 4rem;}
.w50{width: 50%;}
.navContent{
    padding: 0.24rem 0;
    background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
}
.preSaleContent{
    width: 90%;
    margin: 0.5rem auto;
    .saleInfo{
        border-bottom: 1px #eee solid;
        padding: 0.2rem 0;
        margin: 0.6rem 0 1rem 0;
    }
    input{
        border:none
    }
}
.saveBtn{
    width: 3rem;
    border:1px #4873c1 solid;
    padding: 0.14rem 0;
    border-radius:0.4rem
}
.arrowSty{
    display: block;
    width: 0;
    height: 0;
    border:0.12rem solid transparent;
    // border-top-color: #4873c1;
    border-top-color: #fff;
    position: relative;
    top: 0.06rem;
    margin-left: 0.06rem;
}
</style>
